import React, { Component } from "react";
import PropTypes from "prop-types";
import { nanoid } from "nanoid";
import "./index.css";

export default class Header extends Component {
  static propTypes = {
    addTodo: PropTypes.func.isRequired
  }
  handleKeyup = e => {
    const { keyCode, target } = e;
    if (keyCode !== 13) return;
    if (target.value.trim() === "") {
      alert("输入不能为空");
      return;
    }
    const todoObj = {
      id: nanoid(),
      name: target.value,
      done: false
    };
    this.props.addTodo(todoObj);
    target.value = "";
  };
  render() {
    return (
      <div className="header">
        <input className="header-ipt"
          type="text"
          placeholder="请输入任务名称,按回车添加"
          onKeyUp={this.handleKeyup}
        />
      </div>
    );
  }
}
